<template>
  <div class="home-new">
    <div class="home-new-title">
      <h3>每周上新</h3>
    </div>
    <ul>
      <li v-for="item in newList" :key="item.id">
        <img :src="item.list_pic_url" alt="">
        <p>{{ item.name }}</p>
        <p><span>￥</span>{{ item.retail_price }}</p>
      </li>
    </ul>
  </div>
</template>

<script setup>
const newList = [
  {name:'超级斧头',list_pic_url:'/images/h1.jpg',retail_price:'88'},
  {name:'超级木工斧',list_pic_url:'/images/h2.jpg',retail_price:'88'},
  {name:'超级工兵斧',list_pic_url:'/images/h3.jpg',retail_price:'88'},
  {name:'超级精刚斧',list_pic_url:'/images/h4.jpg',retail_price:'88'}
]
</script>
<style lang="less" scoped> .home-new {
  .home-new-title {
    text-align: center; 
    font-size: 16px;
    margin-top: 1.6rem; 
    height: 50px;
  h3 {
    width: 50%;
    border-top: 2px solid #ccc; 
    padding-top: 8px;
    margin: 0 auto;
  } 
}
  ul {
    display: flex;
    justify-content: space-between; 
    flex-wrap: wrap;
    padding: 1rem 0 0;
    background-color: #f9f9f9;
     li {
    width: 49.5%; 
    img {
    width: 100%; 
  }
  p {
    text-align: center; 
    margin: 0.5rem 0;
  }
  span {
    color: #FF8000; 
    font-size: 12px;
  } 
    }
      }
       }
</style>
